<template>
	<gesture-back>
		<view class="container">
			<!-- 评分展示卡片 -->
			<view class="score-card">
				<view class="score-row">
					<view class="id-box">
						<text class="id-label">{{ ratingType }}</text>
						<text class="id-value">{{ ratingName }}</text>
					</view>
					<view class="score-box">
						<text class="score-value">{{ ratingScore }}</text>
						<text class="score-unit">分</text>
					</view>
				</view>
				<view class="divider"></view>
				<view class="info-row">
					<view class="type-info">
						<text class="label">特点:</text>
						<text class="value">{{ featureTags.join('，') }}</text>
					</view>
					<view class="eval-count">
						<text>{{ totalRatings }}人评价</text>
					</view>
				</view>
			</view>
			
			<!-- 星级评分 -->
			<view class="rate-card">
				<view class="rate-content">
					<!-- 星级评分容器 - 与乘务长详情页对齐 -->
					<view class="star-rating-container">
						<view class="star-rating-title">星级评分</view>
						
						<view class="stars">
							<view 
								class="star" 
								v-for="i in 5" 
								:key="i"
								@tap="setRating(i)"
							>
								<uni-icons 
									:type="i <= userRating/2 ? 'star-filled' : 'star'" 
									size="28" 
									:color="i <= userRating/2 ? '#ffca3a' : '#ccc'"
								></uni-icons>
							</view>
						</view>
						<view class="rate-display">
							<text class="rate-value">{{ userRating }}</text>
							<text class="rate-unit">分</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 评论内容 -->
			<view class="comment-card">
			
				<view class="comment-content">
					<comments ref="commentsComponent" :hide-input-bar="true" />
				</view>
			</view>
			
			<!-- 底部评论框 -->
			<view class="comment-box">
				<input type="text" placeholder="写下你的评价..." v-model="commentText" class="comment-input" />
				<view class="comment-btn" @tap="submitComment">提交</view>
			</view>
		</view>
	</gesture-back>
</template>

<script>
import Comments from '@/components/common-comments/index.vue'
import GestureBack from '@/components/gesture-back/index.vue'

export default {
	components: {
		Comments,
		GestureBack
	},
	data() {
		return {
			ratingId: '',
			ratingName: '',
			ratingScore: '',
			ratingType: '',
			totalRatings: 286,
			positivePercent: 94,
			avgResponseTime: '15分钟',
			userRating: 0,
			hasRated: false,
			commentText: '',
			featureTags: ['性价比高', '环境舒适']
		}
	},
	onLoad(options) {
		// 获取页面参数
		if (options) {
			this.ratingId = options.id || '';
			this.ratingName = options.name || '未知评分项';
			this.ratingScore = options.score || '0.0';
			this.ratingType = options.type || '未分类';
			
			// 根据评分类型调整特点标签
			this.adjustFeatureTags(this.ratingType);
		}
		
		console.log('加载评分详情:', this.ratingName, this.ratingScore, this.ratingType);
	},
	methods: {
		// 根据评分类型调整特点标签
		adjustFeatureTags(type) {
			switch (type) {
				case '美食':
					this.featureTags = ['味道鲜美', '环境优雅'];
					break;
				case '景点':
					this.featureTags = ['景色优美', '环境清幽'];
					break;
				case '酒店':
					this.featureTags = ['床品舒适', '环境安静'];
					break;
				case '购物':
					this.featureTags = ['品牌齐全', '环境舒适'];
					break;
				case '交通':
					this.featureTags = ['准时可靠', '座位舒适'];
					break;
				default:
					// 默认特点标签保持不变
					break;
			}
		},
		
		setRating(rating) {
			this.userRating = rating * 2;
			uni.showToast({
				title: '评分成功',
				icon: 'success'
			});
			this.hasRated = true;
		},
		

		
		submitComment() {
			if (!this.commentText.trim()) {
				uni.showToast({
					title: '评论内容不能为空',
					icon: 'none'
				});
				return;
			}
			
			if (this.userRating === 0) {
				uni.showToast({
					title: '请先进行评分',
					icon: 'none'
				});
				return;
			}
			
			const newComment = {
				id: Date.now(),
				username: '我',
				avatar: '/static/logo.png',
				content: this.commentText,
				time_str: new Date().toISOString().split('T')[0],
				location: '',
				likes: 0,
				isLiked: false,
				replies: []
			};
			
			try {
				if (this.$refs.commentsComponent) {
					this.$refs.commentsComponent.addComment(newComment);
					console.log('评论已添加到组件');
				} else {
					console.error('评论组件未找到');
				}
			} catch (error) {
				console.error('添加评论失败:', error);
			}
			
			uni.showToast({
				title: '评价成功',
				icon: 'success'
			});
			
			this.commentText = '';
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #f6f7fb;
}

.container {
	padding-bottom: 120rpx;
}

.score-card, .rate-card, .comment-card {
	margin: 20rpx;
	border-radius: 8rpx;
	background-color: #fff;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	overflow: hidden;
}

.score-card {
	padding: 30rpx;
}

.score-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.id-box {
	.id-label {
		font-size: 24rpx;
		color: #999;
		margin-right: 10rpx;
	}
	
	.id-value {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}
}

.score-box {
	display: flex;
	align-items: baseline;
	
	.score-value {
		font-size: 64rpx;
		font-weight: 600;
		color: #6c5ce7;
		line-height: 1;
	}
	
	.score-unit {
		font-size: 24rpx;
		color: #6c5ce7;
		margin-left: 5rpx;
	}
}

.divider {
	height: 1rpx;
	background-color: #f0f0f0;
	margin: 20rpx 0;
}

.info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.type-info {
	font-size: 26rpx;
	color: #333;
	
	.label {
		color: #999;
		margin-right: 10rpx;
	}
}

.eval-count {
	font-size: 24rpx;
	color: #999;
	padding: 6rpx 15rpx;
	background-color: #f5f5f5;
	border-radius: 15rpx;
}

/* 星级评分 */
.rate-card {
	margin-top: 20rpx;
}

.rate-content {
	padding: 30rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.star-rating-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	background-color: #f9f9fc;
	border-radius: 12rpx;
	padding: 20rpx;
}

.star-rating-title {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 20rpx;
}

.stars {
	display: flex;
	justify-content: center;
	margin-bottom: 20rpx;
}

.star {
	margin: 0 8rpx;
}

.rate-display {
	display: flex;
	align-items: baseline;
	justify-content: center;
}

.rate-value {
	font-size: 28rpx;
	font-weight: 600;
	color: #6c5ce7;
	margin-right: 5rpx;
}

.rate-unit {
	font-size: 24rpx;
	color: #6c5ce7;
}

/* 评论内容 */
.comment-content {
	padding: 20rpx;
}

/* 底部评论框 */
.comment-box {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	display: flex;
	padding: 20rpx;
	border-top: 1rpx solid #f0f0f0;
}

.comment-input {
	flex: 1;
	height: 80rpx;
	padding: 0 20rpx;
	background-color: #f5f5f5;
	border-radius: 8rpx;
	font-size: 28rpx;
}

.comment-btn {
	width: 140rpx;
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #6c5ce7;
	color: #fff;
	border-radius: 8rpx;
	margin-left: 20rpx;
	font-size: 28rpx;
}
</style>
